import QtQuick 2.12
import QtQuick.Window 2.12

//使用控件的时候需要导入的
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("测试一下")

//    Button
//    {
//        id:exitbutton
//        text: "Exit Button"
//        anchors.left: parent.left  //左边框和父边框一样
//        anchors.bottom: parent.bottom //底部和父亲的底部一样
//        anchors.bottomMargin: 100  //距离底部的边距

//        onClicked:
//        {   //按下事件
//            Qt.quit(); //退出操作
//        }
//    }

//    Rectangle
//    {
//        x:200
//        y:0

//        width: 250
//        height: 70

//        color: "#00B000"
//        opacity: 1   //opacity  -- 不透明度
//    }

//    CheckBox
//    {
//        id:checkboxcontrol
//        text: qsTr("湖北省荆门市")
//        checked: true
//        x:200
//        y:200

//        indicator: Rectangle  //修改checkbox里面的矩形
//        {
//            implicitWidth: 60
//            implicitHeight: 60
//            x:checkboxcontrol.leftPadding
//            y:parent.height/2 - height/2
//            radius:3
//                           //按下复选框
//             border.color: checkboxcontrol.down?"red":"blue" // 边框颜色
//             Rectangle{     //内部再放一个矩形
//                 width: 30
//                 height: 30
//                 x:15
//                 y:15
//                 radius: 3

//                 color: checkboxcontrol.down?"#18a81a":"*888999"
//             }
//        }

//        contentItem: Text  //设置文本
//        {
//            text : checkboxcontrol.text
//            font.pixelSize : 20
//        }
//    }


    Rectangle{
        id : irect
        x:100
        y:120
        width: 300
        height: 60

        state: "changeRed" //默认状态
        //状态列表
        states:[
            State {
                name: "changeRed"
                PropertyChanges {
                    target: irect
                    color:"red"
                }
            },

            State {
                name: "changeBlue"
                PropertyChanges {
                    target: irect
                    color: "blue"
                }
            }
        ]

    //设置转换方式
    transitions: [
        Transition {
            from: "changeRed"
            to: "changeBlue"
            PropertyAnimation{
                properties: "color, width, height"
                duration: 3000 //过程时间
            }
        }
    ]
    }

    Button{
        id:changeState
        x:150
        y:190
        text: "change state"
        onClicked: irect.state = "changeBlue";
    }

    Button{
        id:recover
        x:300
        y:190
        text: "recover state"
        onClicked: irect.state = "changeRed";
    }
}






